<template>
  <div class="abnormal-analysis">
    <BasicCard>
      <BasicVxeTable v-bind="gridOptions" v-on="gridEvents"> </BasicVxeTable>
    </BasicCard>
    <BasicCard>
      <BasicVxeTable v-bind="gridOptionsDetail"> </BasicVxeTable>
    </BasicCard>
  </div>
</template>

<script setup lang="ts">
  import type { VxeGridListeners } from 'vxe-table'
  import { handleAbnormalColumnsList, AbnormalAnalysisDetailTableColumns } from '../data'
  import { splitTsIdToTime } from '@/utils'
  import {
    getCanShuXiangQinList_cuSha_jiTai,
    getCanShuXiangQinList_cuSha_pinZhong,
    postFengXiList_cuSha_jiTai,
    postFengXiList_cuSha_pinZhong
  } from '@/api/shengChanJianShi'
  import dayjs from 'dayjs'

  const props = defineProps<{
    processName: string
    statusCode: string
  }>()

  const { t } = useI18n()
  const gridOptions = reactive<BasicGridProps>({
    cellClassName({ column }) {
      if (['materialName', 'breakCnt', 'breakYarnCnt'].includes(column.field)) {
        return 'col-color'
      }
      if (['breakCnt', 'breakYarnCnt'].includes(column.field)) {
        return 'col-underline'
      }
      return null
    },
    extraConfig: {
      title: t('custom.统计报表'),
      isCustom: true,
      isExport: true,
      isFilterAndSort: true
    }, // 拓展的配置
    id: `abnormal-analysis-${props.statusCode}`, // id用于缓存,务必配置
    toolbarConfig: {}, // 工具栏
    maxHeight: 400,
    exportConfig: {
      filename: '滤尘机台报表'
    },
    columns: handleAbnormalColumnsList(props.statusCode)
  })

  const gridOptionsDetail = reactive<BasicGridProps>({
    extraConfig: {
      title: t('custom.详细报表'),
      isCustom: true,
      isExport: true,
      isFilterAndSort: true
    }, // 拓展的配置
    id: `abnormal-analysis-${props.statusCode}-detail`, // id用于缓存,务必配置
    toolbarConfig: {}, // 工具栏
    maxHeight: 500,
    exportConfig: {
      filename: '滤尘机台报表'
    },
    mergeCells: [],
    columns: AbnormalAnalysisDetailTableColumns
  })

  const selectedRow = ref()
  const targetArr = ['materialName', 'breakCnt', 'breakYarnCnt']
  const gridEvents: VxeGridListeners<any> = {
    cellClick({ row, column }) {
      selectedRow.value = row
      const num = targetArr.findIndex((item) => item === column.field)
      getDetailListByVariety(num)
    }
  }

  // 按品种获取list
  const getListByVariety = () => {
    postFengXiList_cuSha_pinZhong({
      tsIdStart: '25071002',
      tsIdEnd: '25071002',
      materialIds: [
        '152ed61a-fe84-8e64-45e3-3a0bd017f251',
        '17eeffed-aad9-201d-23a1-3a0f4fc99df2',
        '3c3c4f1e-52ec-4da2-603d-3a08d1bef26a',
        'ad13e0f1-8843-7c8a-2308-3a16b1d71be5'
      ]
    }).then((res: any) => {
      let itemArr = res
        .sort((a, b) => {
          return b.breakCnt - a.breakCnt
        })
        .map((value) => {
          return {
            materialId: value.materialId,
            materialName: value.materialName,
            breakCnt: value.breakCnt,
            breakTimes: (value.breakTimes / 60).toFixed(2),
            breakYarnCnt: value.breakYarnCnt,
            breakYarnTimes: (value.breakYarnTimes / 60).toFixed(2)
          }
        })
      selectedRow.value = itemArr[0]
      gridOptions.data = itemArr
      gridOptionsDetail.mergeCells = [
        { row: 0, col: 0, rowspan: itemArr[0].breakCnt + itemArr[0].breakYarnCnt, colspan: 1 }
      ]
      getDetailListByVariety(0)
    })
  }

  const getDetailListByVariety = (number) => {
    getCanShuXiangQinList_cuSha_pinZhong({
      materialId: selectedRow.value.materialId,
      tsidStart: 25071002,
      tsidEnd: 25071002,
      annlysisDescription: number
    }).then((res: any) => {
      gridOptionsDetail.data = res.map((value) => {
        return {
          machineDocumentId: value.machineDocumentId,
          machineName: value.machineName,
          materialName: value.materialName,
          description: value.description,
          tsid: value.tsid,
          tsidy: splitTsIdToTime(value.tsid, 0),
          start: dayjs(value.start).format('YYYY-MM-DD HH:mm'),
          end: dayjs(value.end).format('YYYY-MM-DD HH:mm'),
          duration: Math.floor(value.duration / 60)
        }
      })
    })
  }

  onMounted(() => {
    getListByVariety()
  })
</script>

<style scoped lang="scss"></style>
